<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高级毛玻璃效果</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: linear-gradient(135deg, #6e8efb, #a777e3);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      position: relative;
    }

    /* 添加背景颗粒感 */
    body::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 20px 20px;
      z-index: -1;
    }

    /* 配置菜单 */
    .config-menu {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      color: white;
      font-size: 14px;
      line-height: 1.6;
      max-width: 300px;
    }

    .config-menu label {
      display: block;
      margin-bottom: 20px;
    }

    .config-menu .label-text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }

    .config-menu input[type="range"],
    .config-menu input[type="color"] {
      width: 100%;
    }

    .config-menu .value-display {
      font-size: 12px;
      color: #ccc;
    }

    /* 模拟窗口容器 */
    .window {
      position: relative;
      width: 400px;
      height: 300px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
    }

    /* 渐变边框 */
    .window::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(135deg, #ff6b6b, #6e8efb, #a777e3);
      border-radius: 12px;
      z-index: -1;
      filter: blur(10px);
      opacity: 0.5;
    }

    /* 动态光影效果 */
    .window::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1), transparent);
      pointer-events: none;
      z-index: 1;
    }

    .title-bar {
      height: 40px;
      background: rgba(255, 255, 255, 0.15);
      display: flex;
      align-items: center;
      padding: 0 15px;
      font-size: 14px;
      color: white;
      font-weight: bold;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .content {
      padding: 20px;
      color: white;
      font-size: 16px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <!-- 动态配置菜单 -->
  <div class="config-menu">
    <h3>动态样式配置</h3>

    <!-- 圆角半径 -->
    <label>
      <div class="label-text">
        圆角半径 (px)
        <span class="value-display" id="radius-value">10</span>
      </div>
      <input type="range" id="radius" min="0" max="50" value="10">
    </label>

    <!-- 模糊强度 -->
    <label>
      <div class="label-text">
        模糊强度 (px)
        <span class="value-display" id="blur-value">15</span>
      </div>
      <input type="range" id="blur" min="0" max="30" value="15">
    </label>

    <!-- 背景颜色 -->
    <label>
      <div class="label-text">
        背景颜色
      </div>
      <input type="color" id="bgColor" value="#ffffff">
    </label>

    <!-- 背景透明度 -->
    <label>
      <div class="label-text">
        背景透明度 (%)
        <span class="value-display" id="opacity-value">10</span>
      </div>
      <input type="range" id="opacity" min="0" max="100" value="10">
    </label>
  </div>

  <!-- 主窗口 -->
  <div class="window" id="window">
    <div class="title-bar">
      Windows 11 材质样式
    </div>
    <div class="content">
      在右侧的配置菜单中调整样式参数，实时查看效果。
    </div>
  </div>

  <script>
    // 获取 DOM 元素
    const windowElement = document.getElementById('window');
    const radiusInput = document.getElementById('radius');
    const blurInput = document.getElementById('blur');
    const bgColorInput = document.getElementById('bgColor');
    const opacityInput = document.getElementById('opacity');

    // 显示当前值的元素
    const radiusValueDisplay = document.getElementById('radius-value');
    const blurValueDisplay = document.getElementById('blur-value');
    const opacityValueDisplay = document.getElementById('opacity-value');

    // 监听 Border Radius 的变化
    radiusInput.addEventListener('input', () => {
      const value = radiusInput.value;
      windowElement.style.borderRadius = `${value}px`;
      radiusValueDisplay.textContent = value;
    });

    // 监听 Blur Intensity 的变化
    blurInput.addEventListener('input', () => {
      const value = blurInput.value;
      windowElement.style.backdropFilter = `blur(${value}px)`;
      blurValueDisplay.textContent = value;
    });

    // 监听 Background Color 和 Opacity 的变化
    function updateBackgroundColor() {
      const color = bgColorInput.value;
      const opacity = opacityInput.value / 100;
      const rgbaColor = `rgba(${parseInt(color.slice(1, 3), 16)}, ${parseInt(color.slice(3, 5), 16)}, ${parseInt(color.slice(5, 7), 16)}, ${opacity})`;
      windowElement.style.background = rgbaColor;
    }

    bgColorInput.addEventListener('input', updateBackgroundColor);

    opacityInput.addEventListener('input', () => {
      const value = opacityInput.value;
      updateBackgroundColor();
      opacityValueDisplay.textContent = value;
    });

    // 初始化样式和显示值
    radiusValueDisplay.textContent = radiusInput.value;
    blurValueDisplay.textContent = blurInput.value;
    opacityValueDisplay.textContent = opacityInput.value;
    updateBackgroundColor();
  </script>
</body>
</html>
